<template>
	<view class="content">
		<custom-header title="参会人员"></custom-header>
		<view class="bag">
			<!-- <view class="nav flex">
				<view :class="['sj_box', one1 == true ? 'textray' : '']" @click="sjClick">市级</view>
				<view :class="['sj_box2', two2 == true ? 'textray' : '']" @click="qjClick">区级</view>
			</view> -->
			<view class="header-sj" v-if="list!=''">
				<view v-for="(item,index) in list" :key="index">
					<view :class="['header-name',index==tabIndex? 'active':'']" @click="change(item,index)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="table_wrap" v-if="shows">
				<uni-table>
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="left" style="color:rgba(41,64,58); width: 130rpx; font-size: 35rpx">姓名</uni-th>
						<uni-th align="left" style="color:rgb(41,64,58); width: 300rpx; font-size: 35rpx">职务</uni-th>
						<uni-th align="left" style="color:rgb(41,64,58); font-size: 35rpx">乘车号</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="item in info">
						<uni-td style="color:rgb(41,64,58); font-size: 28rpx">{{item.name}}</uni-td>
						<uni-td style="color:rgb(41,64,58); font-size: 28rpx">{{item.position}}</uni-td>
						<uni-td style="color:rgb(41,64,58); font-size: 28rpx">{{item.train_number}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
		<custom-tabbar></custom-tabbar>
	</view>
</template>

<script>
	import {
		getConferee,
		getConfereeSj
	} from '../../api/wei';
	export default {
		data() {
			return {
				shows: true,
				qjshows: false,
				one1: false,
				two2: true,
				list: [],
				index: true,
				tabIndex: 0,
				id: 0,
				info: [],
				cid:'',
			};
		},
		onLoad() {
			this.getData()
			this.id = uni.getStorageSync("id")
		},
		methods: {
			change(item, index) {
				this.tabIndex = index
				this.cid = item.cid
				this.getDataSj()
			},
			getDataSj() {
				getConferee({
					id: this.id,
					cid: this.cid
				}).then(res => {
					if (res.data.code === 200) {
						this.info = res.data.data.list
					}
				})
			},
			sjClick() {
				this.shows = true;
				this.qjshows = false;
				this.one1 = false;
				this.two2 = true;
			},
			qjClick() {
				this.shows = false;
				this.qjshows = true;
				this.one1 = true;
				this.two2 = false;
			},
			async getData() {
				await getConfereeSj().then(res => {
					if (res.data.code === 200) {
						this.list = res.data.data
						// if(this.list!='')
							// this.cid = res.data.data[0]['cid']
						this.getDataSj()
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5fffe;
		padding-bottom: 200upx;
		background: url(../../static/index/Group.png) no-repeat;
		background-attachment: fixed;
		background-position: -180upx 450upx;
	}


	.header-sj {
		display: flex;
		padding-top: 20rpx;
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;
	}

	.header-name {
		color: #CCC;
		font-size: 45rpx;
		margin: 0 1rem;
	}

	.active {
		color:rgb(41,64,58)
	}

	.bag {
		background-color: rgba(255, 255, 255, 0.6) !important;
		border-radius: 30rpx;
		width: 94%;
		margin: 0 auto;

		view,
		table,
		tr,
		td,
		text,
		image,
		text {
			background-color: rgba(255, 255, 255, 0.2) !important;
		}
	}

	/deep/ .uni-table-text {
		position: absolute;
		box-sizing: border-box;
		right: 120rpx;
	}
	
/deep/ .uni-table {
		background-color: transparent;
	}
	.content {
		margin-top: 120rpx;
		border-radius: 30rpx !important;
	}

	.textray {
		color: gray !important;
	}

	.table_wrap {
		width: 100%;
		margin: 0 auto;
		margin-top: 30rpx;
		border-radius: 0 0 30rpx 30rpx;
		padding: 0 1rem 30rpx;
		background-color: rgba(255, 255, 255, 0.2) !important;
	}

	.nav {
		width: 86%;
		margin: 20upx auto;
		padding-top: 120upx;

		.sj_box {
			font-size: 34rpx;
			font-weight: 700;
		}

		.sj_box2 {
			font-size: 34rpx;
			font-weight: 700;
			margin-left: 50rpx;
		}
	}

	.title {
		width: 86%;
		margin: 0 auto;
		padding: 50rpx 0;
		font-size: 50rpx;
		color: #4e8488;
		font-weight: 700;
	}

	.dyb {
		border-bottom: 2rpx solid #4bcc99;
		color: #394f49;
	}
</style>